<template>
  <div class="page-container">
    <div class="header" :class="header ? 'header-on' : ''">
      <div class="logo">
        <img src="@/assets/logo.png" alt="" />
      </div>
      <div class="name">{{ $t('云上蜗牛') }}</div>
      <div class="arrow">
        <i class="iconfont icon-jiantou"></i>
      </div>
      <div class="sub-name">{{ $t('视觉安全预警平台') }}</div>
      <div class="navs">
        <div class="nav">{{ $t('体验中心') }}</div>
        <div class="nav" @click="go()">{{ $t('工作台') }}</div>
        <div class="nav">{{ $t('联系我们') }}</div>
        <div class="language">
          <el-segmented v-model="type" :options="options" size="large">
            <template #default="{ item }">
              <div>{{ $t(item.title) }}</div>
            </template>
          </el-segmented>
        </div>
      </div>
    </div>
    <div class="login-form">
      <div class="bg wow fadeIn opacity" data-wow-duration="1s" data-wow-delay="0s"></div>
      <main>
        <div class="left-part">
          <div class="t1 wow fadeInUpFix opacity" data-wow-duration="0.8s" data-wow-delay="0s">Vision Security
          </div>
          <div class="t2 wow fadeInUpFix opacity" data-wow-duration="0.8s" data-wow-delay="0.1s">
            {{ $t('正式发布') }}
          </div>
          <div class="t3 wow fadeInUpFix opacity" data-wow-duration="0.8s" data-wow-delay="0.2s">
            <div class="t4">
              <div class="circle"></div>
              <span>{{ $t('校园安全：学生摔倒、学生打架') }}</span>
            </div>
            <div class="t4">
              <div class="circle"></div>
              <span>{{ $t('工地安全：安全帽识别，危险动作识别') }}</span>
            </div>
            <div class="t4">
              <div class="circle"></div>
              <span>{{ $t('商场安全：电梯摔倒识别，消防栓实时监测') }}</span>
            </div>
            <div class="t4">
              <div class="circle"></div>
              <span>{{ $t('社区安全：高空抛物，陌生人闯入') }}</span>
            </div>
          </div>
        </div>
        <div class="right-part wow fadeInUpFix opacity" data-wow-duration="0.8s" data-wow-delay="0s">
          <div class="bg"></div>
          <div class="mask"></div>
          <div class="form">
            <div class="title">{{ $t('登录进入工作台') }}</div>
            <div class="input">
              <el-input v-model="form.username" :placeholder="$t('请输入邮箱')" />
            </div>
            <div class="input">
              <el-input type="password" v-model="form.password" :placeholder="$t('请输入密码')" />
            </div>
            <div class="btn" @click="handleLogin">{{ $t('立即登录') }}</div>
          </div>
          <!--        <div class="border"></div>-->
        </div>
      </main>
    </div>
    <div class="section-2">
      <main>
        <div class="title wow fadeInUpFix opacity" data-wow-duration="0.8s" data-wow-delay="0s">
          <div class="c1"></div>
          <div class="c2"></div>
          <span>{{ $t('核心功能') }}</span>
          <div class="c2"></div>
          <div class="c1"></div>
        </div>
        <div class="list">
          <div class="item wow fadeInUpSmall opacity" data-wow-duration="0.8s" data-wow-delay="0s">
            <div class="circle">
              <span>{{ $t('AI日报') }}</span>
              <div class="bg"></div>
              <div class="mask"></div>
            </div>
            <div class="content">
              {{
                $t(
                  '基于向量数据库，我们的系统可以学习公司管理体系、日常事件处置经验等，而且随着学习知识量的不断增加，AI参谋的能力会不断的提高，您有什么问题可以实时与她对话，无论是语音还是文字都可以',
                )
              }}
            </div>
          </div>
          <div class="item wow fadeInUpSmall opacity" data-wow-duration="0.8s" data-wow-delay="0.1s">
            <div class="circle">
              <span>{{ $t('智能处置') }}</span>
              <div class="bg"></div>
              <div class="mask"></div>
            </div>
            <div class="content">
              {{
                $t(
                  '在事故发生时，AI视觉预警系统能够迅速发现事故情况，并通过实时监测和智能分析，自动调取相关资料和指导步骤，提供给相关人员，从而加快事故处置的速度和准确性',
                )
              }}
            </div>
          </div>
          <div class="item wow fadeInUpSmall opacity" data-wow-duration="0.8s" data-wow-delay="0.2s">
            <div class="circle">
              <span>{{ $t('AI参谋') }}</span>
              <div class="bg"></div>
              <div class="mask"></div>
            </div>
            <div class="content">
              {{
                $t(
                  '当系统识别出危险事件后，AI会根据学习的文件知识和日常的管理经验及时给管理者发送事件处置方案，它将是一名比任何员工都懂运营的智能预警专家',
                )
              }}
            </div>
          </div>
        </div>
      </main>
    </div>
    <div class="section-3">
      <main>
        <div class="title wow fadeInUpFix opacity" data-wow-duration="0.8s" data-wow-delay="0s">
          <div class="c1"></div>
          <div class="c2"></div>
          <span>{{ $t('入驻市场') }}</span>
          <div class="c2"></div>
          <div class="c1"></div>
        </div>
        <div class="market">
          <div class="item-big wow fadeInUpSmall opacity" data-wow-duration="0.8s" data-wow-delay="0s">
            <div class="mask"></div>
            <div class="bg">
              <img src="@/assets/img/ali.jpg" alt="" />
            </div>
            <div class="pic"></div>
            <div class="content">
              <div class="name">{{ $t('阿里云市场') }}</div>
              <div class="des">
                {{
                  $t(
                    '旗下软件交易与交付第一平台，我们是阿里云标准级合作伙伴，为客户提供从云到端全链路的解决方案。与此同时，我们加入了通义千问合作计划，为您提供定制化的MAAS（模型及服务）产品',
                  )
                }}
              </div>
            </div>
          </div>
          <div class="item-small wow fadeInUpSmall opacity" data-wow-duration="0.8s" data-wow-delay="0.1s">
            <div class="pic">
              <div class="mask"></div>
              <div class="bg">
                <img src="@/assets/img/ali.jpg" alt="" />
              </div>
            </div>
            <div class="content">
              <div class="name">{{ $t('百度AI市场') }}</div>
              <div class="des">
                {{
                  $t(
                    '作为百度AI服务商，我们基于百度AI丰富强大的技术基础，让AI技术赋能和落地形成有效的链条，为客户提供智能化、一站式的定制服务',
                  )
                }}
              </div>
            </div>
          </div>
          <div class="item-small wow fadeInUpSmall opacity" data-wow-duration="0.8s" data-wow-delay="0.2s">
            <div class="pic">
              <div class="mask"></div>
              <div class="bg">
                <img src="@/assets/img/ali.jpg" alt="" />
              </div>
            </div>
            <div class="content">
              <div class="name">{{ $t('腾讯云市场') }}</div>
              <div class="des">
                {{
                  $t(
                    '在腾讯云市场，您可以看到我们多种解决方案，我们可以基于腾讯云计算资源为您提供定制化的软件开发服务',
                  )
                }}
              </div>
            </div>
          </div>
        </div>
      </main>
    </div>
    <div class="footer">
      <main>
        <div class="top-part">
          <div class="left">{{ $t('云上蜗牛') }}</div>
          <div class="mid">
            <div class="title">{{ $t('公司信息') }}</div>
            <div class="nav">{{ $t('公司官网') }}</div>
            <div class="nav">{{ $t('公司邮箱') }}</div>
            <div class="nav">{{ $t('公司电话') }}</div>
          </div>
          <div class="mid">
            <div class="title">{{ $t('合作加盟') }}</div>
            <div class="nav">{{ $t('商务合作') }}</div>
            <div class="nav">{{ $t('工作室加盟') }}</div>
            <div class="nav">{{ $t('用户协议') }}</div>
            <div class="nav">{{ $t('隐私政策') }}</div>
          </div>
          <div class="right">
            <div class="qr"></div>
            <div class="tips">{{ $t('扫码了解详情') }}</div>
          </div>
        </div>
        <div class="bottom-part">
          <div class="copyright">yunwo.vision@copyright.2025</div>
          <div class="icp">{{ $t('沪ICP备2022010291号') }}</div>
        </div>
      </main>
    </div>
  </div>
</template>

<script>
import { login } from '@/api/index';
import { WOW } from 'wowjs';
import { mapState, mapActions } from 'vuex';

export default {
  name: 'login',
  data() {
    return {
      header: false,
      type: localStorage.getItem('language') ? localStorage.getItem('language'): 'zh',
      options: [
        {
          title: '中文',
          value: 'zh',
        },
        {
          title: 'ENG',
          value: 'en',
        },
      ],
      form: {
        username: 'zhnj@163.com',
        password: '123456',
      },
    };
  },
  computed: {
    ...mapState({
      language: (state) => state.system.language,
    })
  },
  watch: {
    type(nv) {
      this.setLanguage(nv);
    },
  },
  mounted() {
    this.$nextTick(() => {
      new WOW().init();
    });
    window.addEventListener('scroll', this.onScrollFunc, true);
  },
  beforeUnmount() {
    window.removeEventListener('scroll', this.onScrollFunc, true);
  },
  unmounted() {
    window.removeEventListener('scroll', this.onScrollFunc, true);
  },
  methods: {
    ...mapActions({ setUserInfo: 'system/setUserInfo' }),
    go() {
      this.$router.push('/');
    },
    setLanguage(lang) {
      this.$i18n.locale = lang; // 修改全局语言
      this.$store.dispatch('system/setLanguage', lang);
    },
    onScrollFunc() {
      if (document.documentElement.scrollTop > 0) {
        this.header = true;
      } else {
        this.header = false;
      }
    },
    async handleLogin() {
      if (!this.form.username || !this.form.password) {
        this.$message.error('邮箱和密码不能为空！');
        return;
      }
      const params = {
        username: this.form.username,
        password: this.form.password,
      };
      try {
        const { data } = await login(params);
        if (data.code === 0) {
          this.setUserInfo(data.data)
          localStorage.setItem('token', data.data.token);
          localStorage.setItem('expire', data.data.expire + (Date.now() / 1000));
          // 根据需要跳转到工作台或其他页面
          if (window.innerWidth <= 750) {
            this.$router.push({ name: 'MobileIndex' });
          } else {
            if (data.data.userRole === 'platform') {
              this.$router.push({ name: 'Company' }); // 示例跳转到企业管理
            } else {
              this.$router.push({ name: 'Analysis' }); // 示例跳转到工作台
            }
          }

        } else {
          this.$message.error('登录失败，请检查用户名和密码');
        }
      } catch (error) {
        console.error('登录请求失败:', error);
        this.$message.error('登录失败，请稍后再试');
      }
    },
  },
};
</script>

<style scoped lang="scss">
.opacity {
  opacity: 0;
  animation-fill-mode: forwards;
}

main {
  max-width: 1480px;
  @include clear;
  margin: 0 auto;
}

.page-container {
  width: 100%;
  background: #010302;

  .header {
    width: 100%;
    height: 133px;
    position: fixed;
    z-index: 999;
    box-sizing: border-box;
    padding: 40px 80px;
    transition: 0.3s ease;

    :deep(.el-segmented) {
      margin-top: 0px !important;
    }

    .logo {
      float: left;
      width: 53px;
      height: 53px;

      img {
        @include fit(contain);
      }
    }

    .name {
      float: left;
      margin-left: calc(100vw * (34 / 1920));
      font-weight: 500;
      font-size: 30px;
      color: #ffffff;
      line-height: 53px;
    }

    .arrow {
      float: left;
      line-height: 53px;
      margin: 0 12px;

      i {
        color: $color;
        font-size: 20px;
      }
    }

    .sub-name {
      float: left;
      font-weight: 400;
      font-size: 22px;
      color: $color;
      line-height: 53px;
    }

    .navs {
      float: right;
      display: flex;
      align-items: center;
      height: 53px;

      .nav {
        font-weight: 500;
        font-size: 18px;
        color: #ffffff;
        margin-right: 50px;
        transition: 0.3s ease;
        cursor: pointer;

        &:hover {
          color: $color;
        }
      }
    }
  }

  .header-on {
    background: rgba(0, 0, 0, 0.3);
    padding-top: 10px;
    padding-bottom: 10px;
    height: 73px;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
}

.login-form {
  width: 100%;
  height: 100vh;
  position: relative;

  .bg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    background-image: url('@/assets/img/login.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    pointer-events: none;
  }

  main {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 5;

    &:before {
      display: none;
    }

    &:after {
      display: none;
    }
  }

  .left-part {
    width: 700px;
    float: left;

    .t1 {
      font-weight: 500;
      font-size: 100px;
      color: #39ea88;
    }

    .t2 {
      font-weight: 500;
      font-size: 50px;
      color: #ffffff;
      margin-top: 8px;
    }

    .t3 {
      margin-top: 70px;

      .t4 {
        height: 40px;
        font-weight: 400;
        font-size: 20px;
        color: #ffffff;
        display: flex;
        align-items: center;

        .circle {
          width: 10px;
          height: 10px;
          background: #39ea88;
          border-radius: 50%;
          display: inline-block;
          margin-right: 19px;
        }
      }
    }
  }

  .right-part {
    float: right;
    width: 425px;
    height: 353px;
    position: relative;
    border-radius: 32px;

    .bg {
      position: absolute;
      top: 0px;
      left: 0px;
      width: 100%;
      height: 100%;
      border: 1px solid rgba(57, 234, 136, 0.5);
      border-radius: 32px;
      box-sizing: border-box;
      background-clip: padding-box, border-box;
      background-origin: padding-box, border-box;
      pointer-events: none;
      transition: 0.6s ease;
      background: linear-gradient(169deg,
          rgba(7, 176, 82, 0.2) 0%,
          #181818 86%);
      box-sizing: border-box;
      z-index: 1;
    }

    .mask {
      z-index: 5;
      position: absolute;
      top: 1px;
      left: 1px;
      width: 100%;
      height: 100%;
      border-radius: 32px;
      box-sizing: border-box;
      background-clip: padding-box, border-box;
      background-origin: padding-box, border-box;
      pointer-events: none;
      transition: 0.6s ease;
      background: linear-gradient(312deg, #181818 14%, rgba(#181818, 0));
    }

    .form {
      position: absolute;
      top: 0px;
      left: 0px;
      width: 100%;
      height: 100%;
      z-index: 10;
      padding-top: 33px;
      box-sizing: border-box;

      .title {
        width: 100%;
        text-align: center;
        font-weight: 500;
        font-size: 24px;
        color: $color;
        margin-bottom: 28px;
      }

      .input {
        width: 100%;
        box-sizing: border-box;
        padding: 0 20px;
        margin-bottom: 22px;

        :deep(.el-input) {
          height: 60px;

          .el-input__wrapper {
            border-radius: 60px;
            padding: 0 25px;

            .el-input__inner {
              font-size: 20px;
              color: #fff !important;
            }

            input::-webkit-input-placeholder {
              font-size: 20px;
              color: #7d7d7d !important;
              font-weight: 400;
            }
          }
        }
      }

      .btn {
        width: calc(100% - 40px);
        margin-left: 20px;
        height: 60px;
        background: linear-gradient(90deg, #00a84b, #39ea88, #00a84b);
        border-radius: 100px 100px 100px 100px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 500;
        font-size: 24px;
        color: #ffffff;
        transition: 0.6s ease;
        background-size: 200% 100%;
        background-position: 0% 100%;
        cursor: pointer;

        &:hover {
          background-position: 100% 100%;
        }
      }
    }
  }
}

.section-2 {
  width: 100%;
  padding-bottom: 200px;

  .title {
    font-weight: 500;
    font-size: 36px;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 100px;

    span {
      margin-left: 52px;
      margin-right: 52px;
    }

    .c1 {
      width: 15px;
      height: 15px;
      background: rgba(47, 209, 120, 0.5);
      border-radius: 50%;
      margin-right: 30px;
      margin-left: 30px;
    }

    .c2 {
      width: 25px;
      height: 25px;
      background: #2fd178;
      border-radius: 50%;
    }
  }

  .list {
    display: flex;
    width: 100%;
    justify-content: space-between;

    .item {
      width: 316px;

      .circle {
        width: 316px;
        height: 316px;
        background: #101010;
        border-radius: 50%;
        margin-bottom: 90px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 500;
        font-size: 36px;
        color: #ffffff;
        transition: 0.3s ease;
        position: relative;

        span {
          position: relative;
          z-index: 10;
          text-align: center;
        }

        .bg {
          position: absolute;
          top: 0px;
          left: 0px;
          width: 100%;
          height: 100%;
          border: 1px solid rgba(57, 234, 136, 0.5);
          border-radius: 50%;
          box-sizing: border-box;
          background-clip: padding-box, border-box;
          background-origin: padding-box, border-box;
          pointer-events: none;
          transition: 0.6s ease;
          background: linear-gradient(169deg,
              rgba(7, 176, 82, 0.2) 0%,
              #181818 86%);
          box-sizing: border-box;
          z-index: 1;
          opacity: 0;
          transform: translateY(-15px) translateX(-15px);
        }

        .mask {
          z-index: 5;
          position: absolute;
          top: 1px;
          left: 1px;
          width: 100%;
          height: 100%;
          border-radius: 50%;
          box-sizing: border-box;
          background-clip: padding-box, border-box;
          background-origin: padding-box, border-box;
          pointer-events: none;
          transition: 0.6s ease;
          background: linear-gradient(312deg, #181818 14%, rgba(#181818, 0));
          opacity: 0;
          transform: translateY(15px) translateX(15px);
        }
      }

      .content {
        width: 100%;
        text-align: center;
        font-weight: 400;
        font-size: 20px;
        color: #ffffff;
        line-height: 40px;
        transition: 0.3s ease;
      }

      &:hover {
        .circle {
          color: $color;

          .mask {
            opacity: 1;
            transform: translateY(0px) translateX(0px);
          }

          .bg {
            opacity: 1;
            transform: translateY(0px) translateX(0px);
          }
        }

        .content {
          color: $color;
        }
      }
    }
  }
}

.section-3 {
  width: 100%;
  padding-top: 200px;
  padding-bottom: 200px;
  background: #101010;

  .title {
    font-weight: 500;
    font-size: 36px;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 100px;

    span {
      margin-left: 52px;
      margin-right: 52px;
    }

    .c1 {
      width: 15px;
      height: 15px;
      background: rgba(47, 209, 120, 0.5);
      border-radius: 50%;
      margin-right: 30px;
      margin-left: 30px;
    }

    .c2 {
      width: 25px;
      height: 25px;
      background: #2fd178;
      border-radius: 50%;
    }
  }

  .market {
    width: 100%;
    display: flex;
    justify-content: space-between;

    .item-big {
      width: 44%;
      height: 610px;
      box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.6);
      border-radius: 32px 32px 32px 32px;
      overflow: hidden;
      position: relative;

      .pic {
        width: 100%;
        height: 356px;
        margin-bottom: 58px;
      }

      .bg {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;

        img {
          @include fit();
        }
      }

      .mask {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
        background: rgba(0, 0, 0, 0.6);
        transition: 0.4s ease;
      }

      .content {
        width: 100%;
        box-sizing: border-box;
        padding: 0 48px;
        position: relative;
        z-index: 5;

        .name {
          width: 100%;
          font-weight: 500;
          font-size: 24px;
          color: #ffffff;
          margin-bottom: 24px;
          text-align: left;
          transition: 0.4s ease;
        }

        .des {
          width: 100%;
          font-weight: 500;
          font-size: 14px;
          color: #ffffff;
          line-height: 30px;
          text-align: left;
          transition: 0.4s ease;
        }
      }

      &:before {
        content: '';
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0px;
        left: 0px;
        border-radius: 32px 32px 32px 32px;
        border: 4px solid $color;
        transition: 0.4s ease;
        opacity: 0;
        z-index: 5;
        box-sizing: border-box;
        transform: scale(0.98);
      }

      &:hover {
        &:before {
          opacity: 1;
          transform: scale(1);
        }

        .mask {
          background: rgba(0, 0, 0, 0);
        }
      }
    }

    .item-small {
      width: 25.2%;
      height: 610px;

      .pic {
        width: 100%;
        height: 356px;
        border-radius: 32px 32px 32px 32px;
        box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.6);
        margin-bottom: 58px;
        overflow: hidden;
        position: relative;

        &:before {
          content: '';
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0px;
          left: 0px;
          border-radius: 32px 32px 32px 32px;
          border: 4px solid $color;
          transition: 0.4s ease;
          opacity: 0;
          z-index: 5;
          box-sizing: border-box;
          transform: scale(0.98);
        }

        .bg {
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
          z-index: 1;

          img {
            @include fit();
          }
        }

        .mask {
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
          z-index: 2;
          background: rgba(0, 0, 0, 0.6);
          transition: 0.4s ease;
        }
      }

      .content {
        width: 100%;
        box-sizing: border-box;
        padding: 0 28px;
        position: relative;
        z-index: 5;

        .name {
          width: 100%;
          font-weight: 500;
          font-size: 24px;
          color: #ffffff;
          margin-bottom: 24px;
          text-align: left;
          transition: 0.4s ease;
        }

        .des {
          width: 100%;
          font-weight: 500;
          font-size: 14px;
          color: #ffffff;
          line-height: 30px;
          text-align: left;
          transition: 0.4s ease;
        }
      }

      &:hover {
        .pic {
          &:before {
            opacity: 1;
            transform: scale(1);
          }
        }

        .mask {
          background: rgba(0, 0, 0, 0);
        }

        .content {
          .name {
            color: $color;
          }

          .des {
            color: $color;
          }
        }
      }
    }
  }
}

.footer {
  width: 100%;
  background: #010302;
  padding-top: 120px;

  .top-part {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-bottom: 100px;

    .left {
      float: left;
      font-weight: 500;
      font-size: 36px;
      color: #ffffff;
      line-height: 42px;
    }

    .mid {
      float: left;

      .title {
        font-weight: 500;
        font-size: 24px;
        color: #ffffff;
        line-height: 28px;
        margin-bottom: 22px;
      }

      .nav {
        margin-bottom: 12px;
        font-weight: 400;
        font-size: 14px;
        color: #d9d9d9;
        line-height: 30px;
        cursor: pointer;
        transition: 0.3s ease;

        &:hover {
          color: $color;
        }
      }
    }

    .right {
      text-align: center;

      .qr {
        display: inline-block;
        width: 136px;
        height: 136px;
        border-radius: 16px 16px 16px 16px;
        background: #fff;
      }

      .tips {
        margin-top: 24px;
        width: 100%;
        font-weight: 500;
        font-size: 20px;
        color: #ffffff;
        line-height: 28px;
        text-align: center;
      }
    }
  }

  .bottom-part {
    width: 100%;
    padding-bottom: 30px;

    .copyright {
      width: 100%;
      text-align: center;
      font-weight: 400;
      font-size: 20px;
      color: #d9d9d9;
      line-height: 30px;
      margin-bottom: 16px;
    }

    .icp {
      width: 100%;
      text-align: center;
      font-weight: 400;
      font-size: 20px;
      color: #d9d9d9;
      line-height: 30px;
    }
  }
}
@media screen and (max-width: 1650px) {
  main{
    max-width: 1200px;
  }
  .section-2 .list .item .content{
    font-size: 18px;
    line-height: 30px;
  }
  .section-2 .list .item .circle{
    width: 280px;
    height: 280px;
    font-size: 30px;
  }
  .login-form .left-part .t1{
    font-size: 80px;
  }
  .login-form .left-part .t2{
    font-size: 38px;
  }
  .login-form .right-part .form .btn{
    font-size: 20px;
  }
  .page-container .header .name{
    font-size: 24px;
  }
}
@media screen and (max-width: 750px) {
  .header{
    padding: 16px!important;
   .logo, .name, .arrow, .sub-name{
     display: none;
   }
    .navs{
      .nav{
        display: none;
      }
    }
  }

  .login-form .left-part {
    display: none;
  }
  .login-form .right-part {
    width: 90vw;
    margin-left: 5vw;
  }
  .section-2{
    display: none;
  }
  .section-3{
    display: none;
  }
  .footer{
    display: none;
  }
}
</style>
